"use client"

import { View, Text, TouchableOpacity, StyleSheet, Platform, Image } from "react-native"
import { Search, BookOpen, Star } from "lucide-react-native"
import Animated, {
    useSharedValue,
    useAnimatedStyle,
    withSpring,
    withRepeat,
    withSequence,
    withDelay,
} from "react-native-reanimated"
import { ProgressRing } from "./ProgressRing"
import { useEffect } from "react"
import { LinearGradient } from "expo-linear-gradient"
import { theme } from "../../constants/theme"

interface BookSectionProps {
    book: {
        title: string
        subtitle: string
        mastered: number
        learning: number
        total: number
    }
    onBookPress: () => void
    onDetailsPress: () => void
    onSearchPress: () => void
    onBookListPress: () => void
}

export function BookSection({ book, onBookPress, onDetailsPress, onSearchPress, onBookListPress }: BookSectionProps) {
    // Animation for the book card
    const bookCardScale = useSharedValue(1)
    const bookRotate = useSharedValue(0)
    const starRotate = useSharedValue(0)

    useEffect(() => {
        // Subtle breathing animation for the book card
        bookCardScale.value = withRepeat(
            withSequence(withDelay(4000, withSpring(1.02, { damping: 20 })), withSpring(1, { damping: 20 })),
            -1,
            true,
        )

        // Subtle rotation animation
        bookRotate.value = withRepeat(
            withSequence(withSpring(-0.5, { damping: 20 }), withSpring(0.5, { damping: 20 }), withSpring(0, { damping: 20 })),
            -1,
            true,
        )

        // Star animation
        starRotate.value = withRepeat(
            withSequence(
                withDelay(2000, withSpring(0.2, { damping: 10 })),
                withSpring(-0.2, { damping: 10 }),
                withSpring(0, { damping: 10 }),
            ),
            -1,
            true,
        )
    }, [bookCardScale, bookRotate, starRotate])

    const bookCardAnimatedStyle = useAnimatedStyle(() => {
        return {
            transform: [{ scale: bookCardScale.value }, { perspective: 1000 }, { rotateY: `${bookRotate.value}deg` }],
        }
    })

    const starAnimatedStyle = useAnimatedStyle(() => {
        return {
            transform: [{ rotate: `${starRotate.value}rad` }],
        }
    })

    // 计算未学习的单词数量
    const notLearned = book.total - book.mastered - book.learning

    // 未学习的颜色 - 修改为紫色系
    const notLearnedColor = "#9C6ADE" // 紫色系，与蓝色背景形成更好的对比

    return (
        <>
            {/* 搜索栏 */}
            <View style={styles.searchContainer}>
                <TouchableOpacity style={styles.searchInputContainer} onPress={onSearchPress} activeOpacity={0.7}>
                    <Search size={18} color={theme.colors.primary.default} style={styles.searchIcon} />
                    <Text style={styles.searchPlaceholder}>搜索单词</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.materialButton} onPress={onBookListPress}>
                    <BookOpen size={20} color={theme.colors.primary.default} />
                    <Text style={styles.buttonText}>切换教材</Text>
                </TouchableOpacity>
            </View>

            {/* 书本卡片 */}
            <Animated.View style={[styles.bookCardWrapper, bookCardAnimatedStyle]}>
                <TouchableOpacity activeOpacity={0.9} onPress={onBookPress}>
                    <View style={styles.bookShadow}>
                        <LinearGradient
                            colors={theme.colors.primary.gradient}
                            start={{ x: 0, y: 0 }}
                            end={{ x: 1, y: 1 }}
                            style={styles.bookCard}
                        >
                            <Image
                                source={{ uri: "https://cdn-icons-png.flaticon.com/512/4341/4341025.png" }}
                                style={styles.bookDecoration}
                            />

                            <View style={styles.bookHeader}>
                                <View>
                                    <Text style={styles.bookTitle}>{book.title}</Text>
                                    <View style={styles.subtitleContainer}>
                                        <Text style={styles.bookSubtitle}>{book.subtitle}</Text>
                                    </View>
                                </View>
                                <Animated.View style={[styles.starContainer, starAnimatedStyle]}>
                                    <Star
                                        size={24}
                                        color={theme.colors.secondary.orange.default}
                                        fill={theme.colors.secondary.orange.default}
                                    />
                                </Animated.View>
                            </View>

                            <View style={styles.progressSection}>
                                <View style={styles.progressContainer}>
                                    <ProgressRing
                                        mastered={book.mastered}
                                        learning={book.learning}
                                        total={book.total}
                                        size={120}
                                        strokeWidth={10}
                                    />
                                </View>

                                <View style={styles.statsContainer}>
                                    <View style={styles.statItem}>
                                        <View style={[styles.statBadge, { backgroundColor: theme.colors.secondary.green.default }]}>
                                            <Text style={styles.statBadgeText}>{book.mastered}</Text>
                                        </View>
                                        <Text style={styles.statLabel}>已掌握</Text>
                                    </View>

                                    <View style={styles.statItem}>
                                        <View style={[styles.statBadge, { backgroundColor: theme.colors.secondary.orange.default }]}>
                                            <Text style={styles.statBadgeText}>{book.learning}</Text>
                                        </View>
                                        <Text style={styles.statLabel}>学习中</Text>
                                    </View>

                                    <View style={styles.statItem}>
                                        <View style={[styles.statBadge, { backgroundColor: notLearnedColor }]}>
                                            <Text style={styles.statBadgeText}>{notLearned}</Text>
                                        </View>
                                        <Text style={styles.statLabel}>未学习</Text>
                                    </View>
                                </View>
                            </View>

                            <TouchableOpacity style={styles.detailsButton} onPress={onDetailsPress}>
                                <Text style={styles.detailsText}>查看学习详情</Text>
                            </TouchableOpacity>

                            {/* 装饰元素 */}
                            <Image
                                source={{ uri: "https://cdn-icons-png.flaticon.com/512/4341/4341139.png" }}
                                style={styles.decorationTopRight}
                            />
                            <Image
                                source={{ uri: "https://cdn-icons-png.flaticon.com/512/3135/3135789.png" }}
                                style={styles.decorationBottomLeft}
                            />
                        </LinearGradient>
                    </View>
                </TouchableOpacity>
            </Animated.View>
        </>
    )
}

const styles = StyleSheet.create({
    // 搜索栏样式
    searchContainer: {
        flexDirection: "row",
        alignItems: "center",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
        gap: theme.spacing.md,
    },
    searchInputContainer: {
        flex: 1,
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        paddingHorizontal: theme.spacing.lg,
        height: 44,
        ...Platform.select(theme.shadows.small),
    },
    searchIcon: {
        marginRight: theme.spacing.md,
    },
    searchPlaceholder: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.gray,
    },
    materialButton: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        paddingHorizontal: theme.spacing.md,
        height: 44,
        ...Platform.select(theme.shadows.small),
    },
    buttonText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.primary.default,
        marginLeft: theme.spacing.xs,
        fontWeight: theme.fontWeight.medium,
    },

    // 书本卡片样式
    bookCardWrapper: {
        marginHorizontal: theme.spacing.lg,
        marginVertical: theme.spacing.md,
        borderRadius: theme.borderRadius.extraLarge,
        overflow: "visible",
    },
    bookShadow: {
        borderRadius: theme.borderRadius.extraLarge,
        ...Platform.select({
            ios: {
                shadowColor: theme.colors.primary.default,
                shadowOffset: { width: 0, height: 8 },
                shadowOpacity: 0.4,
                shadowRadius: 12,
            },
            android: {
                elevation: 8,
            },
        }),
    },
    bookCard: {
        borderRadius: theme.borderRadius.extraLarge,
        padding: theme.spacing.xl,
        overflow: "hidden",
    },
    bookDecoration: {
        position: "absolute",
        width: 80,
        height: 80,
        opacity: 0.1,
        top: -20,
        left: -20,
    },
    bookHeader: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "flex-start",
        marginBottom: theme.spacing.lg,
    },
    bookTitle: {
        fontSize: theme.fontSize.xxl,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.white,
        textShadowColor: "rgba(0, 0, 0, 0.2)",
        textShadowOffset: { width: 0, height: 2 },
        textShadowRadius: 3,
    },
    subtitleContainer: {
        backgroundColor: "rgba(255, 255, 255, 0.3)",
        borderRadius: theme.borderRadius.medium,
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.xs,
        alignSelf: "flex-start",
        marginTop: theme.spacing.xs,
    },
    bookSubtitle: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.white,
        fontWeight: theme.fontWeight.medium,
    },
    starContainer: {
        backgroundColor: "rgba(255, 255, 255, 0.3)",
        borderRadius: 20,
        width: 40,
        height: 40,
        alignItems: "center",
        justifyContent: "center",
    },
    progressSection: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginVertical: theme.spacing.lg,
        backgroundColor: "rgba(255, 255, 255, 0.2)",
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.md,
        borderWidth: 1,
        borderColor: "rgba(255, 255, 255, 0.3)",
    },
    progressContainer: {
        flex: 1,
    },
    statsContainer: {
        flex: 1,
        flexDirection: "column",
        justifyContent: "center",
        gap: theme.spacing.md,
        paddingLeft: theme.spacing.md,
    },
    statItem: {
        flexDirection: "row",
        alignItems: "center",
    },
    statBadge: {
        width: 36,
        height: 36,
        borderRadius: 18,
        alignItems: "center",
        justifyContent: "center",
        marginRight: theme.spacing.md,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.2)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.3,
                shadowRadius: 3,
            },
            android: {
                elevation: 3,
            },
        }),
    },
    statBadgeText: {
        color: theme.colors.neutral.white,
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.bold,
        textAlign: "center",
    },
    statLabel: {
        color: theme.colors.neutral.white,
        fontSize: theme.fontSize.md,
    },
    detailsButton: {
        backgroundColor: "rgba(255, 255, 255, 0.3)",
        paddingVertical: theme.spacing.md,
        paddingHorizontal: theme.spacing.xl,
        borderRadius: theme.borderRadius.large,
        alignItems: "center",
        justifyContent: "center",
        alignSelf: "center",
        borderWidth: 1,
        borderColor: "rgba(255, 255, 255, 0.5)",
    },
    detailsText: {
        color: theme.colors.neutral.white,
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
    },
    decorationTopRight: {
        position: "absolute",
        width: 40,
        height: 40,
        opacity: 0.2,
        top: 15,
        right: 15,
    },
    decorationBottomLeft: {
        position: "absolute",
        width: 60,
        height: 60,
        opacity: 0.1,
        bottom: 10,
        left: 10,
    },
})

